|
1
|
|
|
import { toggleBox } from '../../bip39'; |
|
2
|
|
|
import { elements } from '../../bip39'; |
|
3
|
|
|
import { updateDisplay } from '../../display'; |
|
4
|
|
|
import { showDisabledBoxToast } from '../../display'; |
|
5
|
|
|
import { generateAllBoxConfigs } from '../../bip39'; |
|
6
|
|
|
|
|
7
|
|
|
export function createGrid(): void { |
|
8
|
|
|
elements.grid.innerHTML = ''; |
|
9
|
|
|
|
|
10
|
|
|
const boxConfigs = generateAllBoxConfigs(); |
|
11
|
|
|
|
|
12
|
|
|
boxConfigs.forEach(config => { |
|
13
|
|
|
const box = createBoxElement(config); |
|
14
|
|
|
attachBoxClickHandler(box, config.index); |
|
15
|
|
|
elements.grid.appendChild(box); |
|
16
|
|
|
}); |
|
17
|
|
|
|
|
18
|
|
|
updateDisplay(); |
|
19
|
|
|
} |
|
20
|
|
|
|
|
21
|
|
|
function createBoxElement(config: { index: number; bitValue: number; ariaLabel: string }): HTMLButtonElement { |
|
22
|
|
|
const box = document.createElement('button'); |
|
23
|
|
|
box.className = 'box'; |
|
24
|
|
|
box.dataset.index = config.index.toString(); |
|
25
|
|
|
box.type = 'button'; |
|
26
|
|
|
box.setAttribute('aria-pressed', 'false'); |
|
27
|
|
|
box.setAttribute('aria-label', config.ariaLabel); |
|
28
|
|
|
|
|
29
|
|
|
const label = document.createElement('span'); |
|
30
|
|
|
label.className = 'bit-label'; |
|
31
|
|
|
label.textContent = config.bitValue.toString(); |
|
32
|
|
|
label.setAttribute('aria-hidden', 'true'); |
|
33
|
|
|
box.appendChild(label); |
|
34
|
|
|
|
|
35
|
|
|
return box; |
|
36
|
|
|
} |
|
37
|
|
|
|
|
38
|
|
|
function attachBoxClickHandler(box: HTMLButtonElement, index: number): void { |
|
39
|
|
|
box.addEventListener('click', () => { |
|
40
|
|
|
if (box.dataset.isDisabled === 'true') { |
|
41
|
|
|
showDisabledBoxToast(); |
|
42
|
|
|
return; |
|
43
|
|
|
} |
|
44
|
|
|
toggleBox(index); |
|
45
|
|
|
updateDisplay(); |
|
46
|
|
|
}); |
|
47
|
|
|
} |
|
48
|
|
|
|
JesusValeraDev /
bip39
